<template>
	<el-row type="flex" justify="center">
		<el-col>
			<el-input placeholder="请输入查询关键字" v-model="input" clearable @input="searchChange" @clear="clearSearch"></el-input>
		</el-col>
	</el-row>
	<el-table :data="pet" height="70vh" style="width: 100%" border v-loading="loading">
		<el-table-column prop="序号" label="序号" :resizable="false" width="50px" align="center" fixed></el-table-column>
		<el-table-column prop="名字" label="名字" :resizable="false" width="70px" fixed></el-table-column>
		<el-table-column prop="星球" label="星球" column-key="星球" :resizable="false" align="center" :filters="filters"
		 :filter-method="filterTag"></el-table-column>
		<el-table-column prop="地区" label="地区" :resizable="false" align="center" min-width="110px">
			<template #default="scope">
				<div v-if="scope.row.地区==''"></div>
				<div v-else>
					<el-tag v-for="(v,k) in scope.row.地区.split(',')" :key="k">{{v}}</el-tag>
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="属性" label="属性" :resizable="false" align="center"></el-table-column>
		<el-table-column prop="技能" label="技能" :resizable="false"></el-table-column>
		<el-table-column prop="稀有度" label="稀有度" :resizable="false" align="center"></el-table-column>
	</el-table>
</template>

<script>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue'

	export default {
		components: {},
		setup() {
			const data = reactive({
				"pet": null,
				"pet_bak": null,
				"loading": true,
				"input":"",
				"filters": [{
					text: "冒险星",
					value: "冒险星"
				}, {
					text: "美食星",
					value: "美食星"
				}, {
					text: "博物馆星",
					value: "博物馆星"
				}, {
					text: "悬疑星",
					value: "悬疑星"
				}]
			});
			const {
				proxy
			} = getCurrentInstance();
			proxy.$axios.get("./pet.json").then(res => {
				data.pet = res.data;
				data.pet_bak = res.data;
				data.loading = false;
			});
			//查询
			const searchChange = (v) => {
				if (v == "") {
					clearSearch();
					return;
				}
				let res = data.pet_bak;
				res = res.filter((item) => {
					let str = Object.values(item).toString();
					let key = str.indexOf(v);
					if (key >= 0) {
						return item;
					}
				});
				data.pet = res;
			};
			//清除查询
			const clearSearch = () => {
				data.loading = true;
				data.pet = data.pet_bak;
				data.loading = false;
			};
			//星球筛选
			const filterTag = (v, row) => {
				return row.星球===v;
			};
			return {
				clearSearch,
				searchChange,
				filterTag,
				...toRefs(data)
			}
		}
	}
</script>

<style>
</style>
